<template>
  <div id="my-car-list">
    <!-- <van-button @click="readAll">123</van-button> -->
    <div class="nav-container">
      <!-- <van-tabs sticky animated swipeable color="#2E79FF" @click="setSrollTop" v-model="activeTab">
        <van-tab v-for="(item, index) in tabs" :key="`${index}tab页`" :title="item.name"> -->
          <div class="tab-panel" >
            <van-pull-refresh ref="newsList" v-model="refreshLoading" @refresh="getDataList(true, false)">
              <img
                slot="loading"
                class="loading-gif-refresh"
                src="../../assets/loading.gif"
              >
              <template v-if="newsFinished && newsList.length == 0">
                <div class="no-data-img">
                  <img src="../../assets/cars/no_data_img.png">
                  <p>暂无用车消息</p>
                </div>
              </template>
              <van-list
                v-show="newsList.length > 0"
                v-model="isLoading"
                :finished="newsFinished"
                finished-text="没有更多数据了"
                @load="getDataList(false, false)">
                <div class="reference-card" v-for="(itemInner, indexInner) in newsList" :key="`${itemInner.id}列表`" @click.stop="goToDetail(itemInner, 'detailInfo')">
                  <div class='content' :class="{'full-name': itemInner.pic == '0'}">
                    <p class='status-title'>
                      <span>{{ itemInner.arrange_num }}</span>
                      <span class="status-text" :class="returnStatus(itemInner.status)">{{ itemInner.status }}</span>
                    </p>
                    <p class="card-info-item van-ellipsis">
                      <van-icon name="location-o"/> {{ itemInner.destination }}
                    </p>
                    <p class="card-info-item van-ellipsis">
                      <van-icon name="clock-o"/> {{ $common.convertDate(itemInner.arrange_start, 'Y-M-D h:m') }} — {{ $common.convertDate(itemInner.arrange_end, 'Y-M-D h:m') }}
                    </p>
                  </div>
                  <!-- <van-image v-if="itemInner.pic != '0'" class="image" :src="$common.returnImg(itemInner.pic)" width="115" height="80"></van-image> -->
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        <!-- </van-tab>
      </van-tabs> -->
    </div>
  </div>
</template>

<script type="text/javascript">
  import qs from 'qs'
  export default {
    data() {
      return {
        newsList: [],
        newsPage: 1,
        newsFinished: false,

        refreshLoading: false,
        isLoading: false,
      }
    },
    activated() {
      window.scrollTo(0, this.$store.state.newsScroll) // 根据记录值进行滚动
      this.$store.commit('changeStatus', { key: 'newsScroll', value: 0 })

      this.$bridge.callHandler('navTitle', { title: '我的用车' })
      this.$bridge.registerHandler('navBack', (data, callback) => {
        callback('h5done')
      })
    },
    mounted() {
      this.getDataList(true, true)
    },
    methods: {
      returnStatus(status) {
        let className = "" 
        switch(status) {
          case '成功':
            className =  'blue';
            break;
          case '取消':
            className =  'red';
            break;
          case '完成':
            className = 'green';
            break;
          default:
            className = 'blue';
            break;
        }
        return className
      },
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
        }, 500);
      },
      readAll() {
        let self = this
        let config = {
          url: `${this.$common.basePath}newNotice.php`,
          data: {
            do: 'reads',
            type: this.$route.query.type == 1 ? 1 : 5,
            user_id: this.$store.state.userId,
          },
          method: 'POST'
        }
        self.$axios(config).then(res => {
          self.$toast.success('已全部标记为已读!')
          self.getDataList(true, true)
        }).catch(err => {

        })
      },
      /**
       * 获取列表数据
       * @return {[type]} [description]
       */
      getDataList(init, showToast) {
        let self = this
        
        if(init) { //初始化查询
          self.newsPage = 1
          self.newsFinished = false
        }

        let config = {
          url: `${this.$common.basePath}aatp5/public/index.php/message/api_car/messagePerson`,
          data: qs.stringify({
            pageIndex: self.newsPage++,
            pageSize: 10,
            uid: this.$store.state.userId,
          }),
          method: 'POST'
        }
        if(showToast) {
          self.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
        }
        
        if(!self.newsFinished || init) {
          self.$axios(config).then(res => {
            self.isLoading = false
            self.newsList = init ? res.data.data : self.newsList.concat(res.data.data)
            if(self.newsList.length >= res.data.total) {
              self.newsFinished = true
            }
            self.refreshLoading = false;
            self.$toast.clear()
          }).catch(err => {
            self.$toast.clear()
          })
        }
      },
      /**
       * 查看详情
       * @param  {[type]} item [description]
       * @param  {[type]} type [description]
       * @return {[type]}      [description]
       */
      goToDetail(item) {
        this.$store.commit('changeStatus', { key: 'newsScroll', value: window.scrollY })
        if(item.is_read == 2) {
          item.read_num++
        }
        item.is_read = 1
        //记录滚动高度
        this.$router.push({name: 'carDetail', query: { id: item.id, type: this.$route.query.type, from: 'default' }})
      }
    }
  }
</script>

<style lang="less" scoped>
  .padding-button {
    height: 30px!important;
    padding: 5px 22px 5px 22px!important;
    font-size: 17px!important;
    line-height: 17px!important;
  }
  #my-car-list {
    min-height: calc( 100vh - 50px );
    background: #F5F5F5;
    .red-point {
      &:after {
        display: inline-block;
        margin-bottom: 3px;
        height: 8px;
        width: 8px;
        content: ' ';
        background: #F54B03;
        border-radius: 4px;
      }
    }
    .tab-panel  {
      -webkit-overflow-scrolling: touch;
      overflow-y: hidden;
      & /deep/ .van-pull-refresh__track {
        min-height: calc( 100vh - 50px );
      }
    }
  }
  .reference-card {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      border-radius: 8px;
      padding: 10px 0;
      margin: 15px;
      background: #fff;
      &:last-child {
        border-bottom: none;
      }
      .content {
        position: relative;
        width: 100%;
        font-size: 17px;
        &.full-name {
          width: 100%;
        }
        .title {
          margin-top: 0;
          max-height: 48px;
          margin-bottom: 8px;
          width: 100%;
          font-size: 17px;
          font-weight: normal;
          color: #333;
        }
        .status-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0 0 8px 0;
          padding: 0 15px 10px 15px;
          width: calc(100% - 30px);
          font-size: 14px;
          color: #999;
          border-bottom: 1px solid #f5f5f5; 
          .status-text {
            display: inline-block;
            font-size: 15px;
            font-weight: bold;
            &.blue {
              color: #2E79FF;
            }
            &.green {
              color: #02C70D;
            }
            &.red {
              color: #F54B03;
            }
            &.yellow {
              color: #F5A703;
            }
          }
        }
        .card-info-item {
          display: flex;
          align-items: center;
          margin: 10px 0;
          padding: 0 15px;
          font-size: 14px;
          color: #333;
          .van-icon {
            font-size: 17px;
            line-height: 21px;
            margin-right: 10px;
          }
          & span:first-child {
            color: #999;
          }
        }
      }
      .image {
        margin-left: 15px;
        width: 115px!important;
        border-radius: 2px!important;
         img  {
          width: 115px!important;
          border-radius: 2px;
        }
      }
    }
</style>